<template>
    <div id="content">
      <child-com 
        v-for="(task, index) in tasks" 
        :key="task.id"
      >
        <template v-slot:header>
          <h1>这是头部：{{ index + 1 }}</h1>
        </template>
        <p>这是主体内容：{{ task.text }}</p>
        <template #footer>
          <p>这是底部：编号{{ index + 1 }}</p>
        </template>
      </child-com>
    </div>
  </template>
  
  <script>
  import childCom from "./childCom.vue";
  
  export default {
    components: {
      childCom
    },
    data() {
      return {
        tasks: [
          { id: 1, text: "Learn Vue.js" },
          { id: 2, text: "Build a project" },
          { id: 3, text: "Explore advanced concepts" },
          { id: 4, text: "Learn Vue.js" },
          { id: 5, text: "Build a project" },
          { id: 6, text: "Explore advanced concepts" }
        ]
      };
    }
  };
  </script>
  
  <style scoped>
  #content {
    display: flex;
  }
  </style>